<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- 载入所有的模板变量到 varTemplate 变量中 -->
  <{include file='_common/_loadVarTemplate.tpl'}>
  <script src="Resource/Script/requireJs/require.js" data-main="<{webcontrol type="LoadJsCss" isPath="true" src="Resource/Script/requireJs/_mainSonForm.js"}>"></script>
  <{webcontrol type='LoadJsCss' src="Resource/Script/layui/layui/css/layui.css"}>
  <{webcontrol type='LoadJsCss' src="Resource/Script/layui/style/admin.css"}>
  <style type="text/css">
    .el-dialog__body {
        padding: 0 10px 40px 10px  !important;
    }
    .el-table__header th {
      border-top: 1px solid #ebeef5;
    }
    .buttonEdit {
      padding:3.5px !important;margin-left:3px !important;
    }

    ::-webkit-scrollbar {
        width: 6px;
        height: 8px;
    }
    div::-webkit-scrollbar:hover {
        height: 8px;
        background-color: rgba(0,0,0, .25);
    }
    ::-webkit-scrollbar-thumb {
      border-radius: 1px;
      background-color: rgba(0, 0, 0, .3)
    }
    div::-webkit-scrollbar-thumb:hover {
      border-radius: 6px;
      background-color: rgba(0, 0, 0, .4)
    }
    #div1 .el-table .cell{padding-left: 2px;padding-right: 2px;}

  </style>
  <title><{$title|default:'表单编辑'}></title>
</head>
<body>
  <div class="" id="div1">
    <el-container>
      <el-main>
        <el-form
          :model="row"
          ref='mainForm'
          @submit.native.prevent
          size="mini"
          :rules="rules"
          >
          <comp-card
            :card-width-col="100"
            card-height="100%"
            :card-title="formTitle"
            >
            <template slot="topRight" v-if="menuRightTop">
              <el-dropdown size="small" @command="handleTopRightClick">
                <el-button type="primary" size="small">
                  {{menuRightTop.text||'更多操作'}}<i class="el-icon-arrow-down el-icon--right"></i>
                </el-button>
                <el-dropdown-menu slot="dropdown" >
                  <el-dropdown-item
                    v-for="(btn,index) in menuRightTop.buttons"
                    :key="index"
                    :command="btn.value">
                    {{btn.text}}
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </template>
            <template slot="body">
              <el-col
                v-for="fld,i in mainFormItems"
                :key="fld.name"
                :span="fld.span ? fld.span : ((fld.type=='comp-textarea' || fld.type=='comp-message-alert' || fld.type=='comp-alert') ? 24 : 8)"
                >
                <component
                  v-if="fld.type=='comp-message-alert'"
                  :is="fld.type"
                  :fld="fld"
                  ></component>
                <el-form-item
                  v-else
                  :label="fld.title"
                  :prop="fld.name"
                  :label-width="fld.labelWidth ? fld.labelWidth+'px' : '100px'"
                  >
                  <component
                    :is="fld.type"
                    :fld="fld"
                    :value="row[fld.name]"
                    @input="handleInput(row,fld.name,arguments[0])"
                    :display-text="fld.displayText"
                    :row="row"
                    :ref="'main_'+fld.name"
                  ></component>
                </el-form-item>
              </el-col>

              <!-- 子表区域 -->
              <template v-for="(_block,_key) in sonFormItems">
                <el-col :span="24">
                  <el-divider content-position="left"><span style="color:#9a9a9a;font-weight: 520;">{{_block.title}}</span></el-divider>
                </el-col>

                <el-table
                  :data="row[_block.key]"
                  size="mini"
                  @cell-mouse-enter="handelMouseOverRow"
                  @cell-mouse-leave="handelMouseLeaveRow"
                  ref="sonTable"
                  style="width: 100%">
                  <el-table-column
                      v-if="_block.showIndex"
                      type="index"
                      width="50">
                  </el-table-column>
                  <el-table-column
                    label="操作"
                    fixed="left"
                    v-if="_block.buttonVisble.editColumn!=false"
                    width="130">
                    <template slot="header" slot-scope="scope">
                      操作
                      <el-button
                        v-if="_block.buttonVisble.buttonAdd!=false"
                        size='mini'
                        type='primary'
                        title='新增'
                        circle
                        plain
                        style="padding:3.5px;margin-left:15px;"
                        @click="handleAddSon(_block.key)"
                        icon="el-icon-plus" ></el-button>
                    </template>
                    <!-- <template slot-scope="scope" v-if="scope.row.__showButton"> -->
                    <template slot-scope="scope" v-if="row[_block.key][scope.$index].__showButton">
                      <el-button type="primary" icon="el-icon-delete" circle size="mini" class="buttonEdit" @click="handleDelete(_block.key,scope)" v-if="_block.buttonVisble.buttonDelete!=false"></el-button>
                      <el-button type="primary" icon="el-icon-document-copy" circle size="mini" class="buttonEdit" @click="handleCopy(_block.key,scope)" v-if="_block.buttonVisble.buttonCopy!=false"></el-button>
                      <el-button type="primary" icon="el-icon-top" circle size="mini" class="buttonEdit" @click="handleMoveup(_block.key,scope)" v-if="_block.buttonVisble.sonUpdown"></el-button>
                      <el-button type="primary" icon="el-icon-bottom" circle size="mini" class="buttonEdit" @click="handleMovedown(_block.key,scope)" v-if="_block.buttonVisble.sonUpdown"></el-button>
                    </template>
                  </el-table-column>

                  <el-table-column
                    v-for="(_item,_k) in _block.items"
                    :key="_k"
                    :label="_item.title"
                    :width="_item.width||150">
                    <template slot-scope="scope">
                      <component
                        :is="_item.type||_item.content"
                        :fld="_item"
                        :value="isset(scope.row,_item.name) ? scope.row[_item.name] : _item.value"
                        @input="handleSonInput({row:scope.row,key:_item.name,val:arguments[0],sonKey:_key})"
                        :row="scope.row"
                        :ref="'son_'+_item.name+'_'+scope.$index"
                      ></component>
                    </template>
                  </el-table-column>

                </el-table>
              </template>

            </template>
            <template slot="footer">
              <el-button type="primary" @click="submitForm('mainForm')" :loading="disableSubmit">确 定</el-button>
              <el-button @click="resetForm('mainForm')">重 置</el-button>
            </template>
          </comp-card>
        </el-form>
      </el-main>
    </el-container>

    <!-- 为其他操作预留的组件位置 -->
    <!-- 比如某个订单需要在弹窗中设置备注信息 -->
    <!-- 比如在弹窗中设置某个客户的联系人等 -->
    <componet v-for="(comp,index) in otherComps" key="index" :is="comp.type" :ref="comp.name" v-bind="comp"></componet>
  </div>
</body>
